import s from './error.less'
import React, { Component } from 'react'
import { Button } from 'antd'
import router from 'umi/router'
import img404 from '../../images/404.png'
import img403 from '../../images/403.png'
import img500 from '../../images/500.png'

class ErrorPage extends Component {
  constructor(props) {
    super(props)
    this.state = {
      content: {
        '/404': {
          img: img404,
          state: 404,
          text: '抱歉，您访问的页面不存在',
        },
        '/403': {
          img: img403,
          state: 403,
          text: '抱歉，您无权访问该页面',
        },
        '/500': {
          img: img500,
          state: 500,
          text: '抱歉，服务器出错了',
        },
      },
    }
  }

  goHome = () => {
    router.replace('/home')
  }

  render() {
    const { path } = this.props.match
    let text = this.state.content[path]
    return (
      <div className={s['error-box']}>
        <div className={s['img-box']}>
          <img src={text.img} alt="404"/>
        </div>
        <div className={s['text-box']}>
          <div className={s['text-box-word']}>{text.state}</div>
          <div className={s['text-box-text']}>{text.text}</div>
          <Button onClick={this.goHome} type={'primary'}>返回首页</Button>
        </div>
      </div>
    )
  }
}

export default ErrorPage
